<template>
    <TopNavBar title="獲利統計" type="back" />
  <div class="earn-statistics-page">
    <div class="top-bg">
      <img class="top-bg-img" src="/static/img/WRx_afe10910_4ln.e8c30610.png" alt="top-bg" />
      <div class="top-content">
        <div class="amount-block">
          <div class="amount-label">金額 (USD)</div>
          <div class="amount-value">0</div>
        </div>
        <div class="summary-row">
          <div class="summary-item">
            <div class="summary-label">累計收益</div>
            <div class="summary-value">0</div>
          </div>
          <div class="summary-item">
            <div class="summary-label">挖礦收益</div>
            <div class="summary-value">0</div>
          </div>
          <div class="summary-item">
            <div class="summary-label">持有收益率</div>
            <div class="summary-value">0%</div>
          </div>
        </div>
      </div>
    </div>
    <div class="content-block">
      <div class="section-title">每日收益（ETH）</div>
      <div class="section-card">
        <ul>
          <li><b>挖礦收益</b></li>
        </ul>
        <div class="chart-placeholder"></div>
      </div>
    </div>


    <div class="content-block">
      <div class="section-card">
        <ul>
          <li><b>成長百分比</b></li>
        </ul>
        <div class="chart-placeholder"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
// 静态页面，无逻辑
</script>

<style scoped>
.earn-statistics-page {
  min-height: 100vh;
  background: #f6f7f8;
}
.top-bg {
  position: relative;
  width: 100%;
  height: 220px;
  background: #2d2e4a;
  overflow: hidden;
}
.top-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}
.top-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  padding-top: 32px;
}
.amount-block {
  text-align: center;
  color: #fff;
  margin-bottom: 18px;
}
.amount-label {
  font-size: 18px;
  font-weight: 500;
  opacity: 0.85;
}
.amount-value {
  font-size: 38px;
  font-weight: bold;
  margin-top: 2px;
}
.summary-row {
  display: flex;
  justify-content: center;
  gap: 48px;
  margin-bottom: 12px;
}
.summary-item {
  text-align: center;
  color: #fff;
}
.summary-label {
  font-size: 15px;
  opacity: 0.8;
}
.summary-value {
  font-size: 20px;
  font-weight: 600;
  margin-top: 2px;
}
.content-block {
  margin: 0 auto;
  max-width: 480px;
  padding: 24px 12px 0 12px;
}
.section-title {
  font-size: 18px;
  font-weight: 700;
  color: #222;
  margin-bottom: 16px;
}
.section-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(31,35,41,0.04);
  padding: 24px 18px 32px 18px;
  min-height: 180px;
}
.section-card ul {
  margin: 0 0 18px 0;
  padding: 0 0 0 18px;
}
.section-card li {
  font-size: 12px;
  color: #222;
  margin-bottom: 8px;
}
.chart-placeholder {
  height: 80px;
  border-bottom: 2px solid #eee;
  margin-top: 32px;
}
</style> 